<template>
	<view >
		<view class="processtup"><image src="http://mall-image.hxyrfwpt.com/static/processtup.png"></image></view>
		<!--表单区域-->
		<view class="form_table">
			<view class="form_item">
				<span>
					商户名称
					<label>*</label>
				</span>
				<input type="text" placeholder="请输入商户名称" class="form_item_input" v-model="form.merchantName" />
			</view>

			<view class="form_item">
				<span>
					经营类目
					<label>*</label>
				</span>
				<picker :range="merCategoryList" mode="selector" :value="index" class="form_item_input" range-key="cateName" @change="bindMerCategoryChanges">
				<!-- 	<input type="text" placeholder="请选择经营类目" :value="merCategoryList[index].cateName"  readOnly="readOnly" /> -->
					<span>{{merCategoryList[index].cateName}}</span>
					<!-- <input type="text"  class="form_item_input"  :value="merCategoryList[index].id" v-model="form.merCategoryId"  hidden/> -->
				</picker>
			</view>
			<view class="form_item">
				<text space="nbsp">
					联系人
					<label>*</label>
				</text>
				<input type="text" placeholder="请输入联系人姓名" class="form_item_input" v-model="form.linkUser" />
			</view>

			<view class="form_item">
				<span>
					联系电话
					<label>*</label>
				</span>
				<input type="text" placeholder="请输入联系人电话" class="form_item_input" v-model="form.linkTel" />
			</view>

			<view class="form_item">
				<span>
					所在地区
					<label>*</label>
				</span>
				<CitySelect ref="cityselect" @callback="cityResult" :items="district" class="form_item_input"></CitySelect>
			</view>
			<view class="form_item">
				<span>
					详细地址
					<label>*</label>
				</span>
				<input type="text" placeholder="请输入详细地址" class="form_item_input" v-model="form.address" />
			</view>

			<!-- 	<view  class="form_item">
				<span>营业执照<label>*</label></span>
			    <image :src="selectImg"  style=" text-align: center;width: 100%;" @click="chooseImage"></image>
			</view>
			<view  class="form_item">
				<span>身份证<label>*</label></span>
			    <image :src="selectImg"  style=" text-align: center;width: 100%;" @click="chooseImage"></image>
			</view> -->

			<view class="list-item-add">
				<view class="name" style="padding-left: 30rpx;">
					商户LOGO
					<text>*</text>
					：
				</view>
				<view class="add-con">
					<view class="left">
						<image :src="logoUrlImage" @click="chooseImage('logoUrl')"></image>
						<view class="texcent">上传店铺Logo</view>
					</view>
					<view class="right">请上传高清的店铺lOGO，支持JPG，JPEG，PNG格式，大小不超过5M</view>
				</view>
			</view>

			<view class="list-item-add">
				<view class="name" style="padding-left: 30rpx;">
					资质文件
					<text>*</text>
					：
				</view>
				<view class="add-con">
					<view class="left">
						<image :src="charterImage" @click="chooseImage('charter')"></image>
						<view class="texcent">上传营业资质</view>
					</view>
					<view class="right">请上传高清的营业执照，支持JPG，JPEG，PNG格式，大小不超过5M</view>
				</view>
			</view>
			<view class="list-item-add">
				<view class="name" style="padding-left: 30rpx;">
					<text>*</text>
					本人身份证：
				</view>
				<view class="add-con">
					<view class="left">
						<image :src="idcardZmImage" @click="chooseImage('idcardZm')"></image>
						<view class="texcent">身份证正面</view>
					</view>
					<view class="right">请上传高清的身份证正面照，支持JPG，JPEG，PNG格式，大小不超过5M</view>
				</view>
				<view class="add-con" style="margin-bottom: 50rpx;">
					<view class="left">
						<image :src="idcardFmImage" @click="chooseImage('idcardFm')"></image>
						<view class="texcent">身份证反面</view>
					</view>
					<view class="right">请上传高清的身份证反面照，支持JPG，JPEG，PNG格式，大小不超过5M</view>
				</view>
			</view>

			<view class="flex-footer">
				<view class="pact">
					点击入驻即表示同意
					<text class="blue" @click="viewRuZhuNews">《商家入驻服务协议》</text>
				</view>
				<button @click="ruzhuSubmit">立即入驻</button>
			</view>
		</view>
	</view>
</template>

<script>
import CitySelect from '@/components/CitySelect';
import { getCity } from '@/api/user';
import { submitRuZhu, getAllMerCategoryList ,ruzhuDetail} from '@/api/shanghu';
import { VUE_APP_RESOURCES_URL, VUE_APP_API_URL } from '@/config';
import {getUserInfo,} from "@/api/user";
export default {
	name: 'merchantRuzhu',
	components: {
		CitySelect
	},
	data() {
		return {
			district: [],
			address: {},
			// addressText: "",
			// selectImg:"../../static/images/upload_icon.png",
			charterImage: '../../static/add-tup.png',
			idcardZmImage: '../../static/add-tup.png',
			idcardFmImage: '../../static/add-tup.png',
			logoUrlImage: '../../static/add-tup.png',
			form: {
				merchantName: '',
				merCategoryId: '',
				linkUser: '',
				linkTel: '',
				address: '',
				charter: '', //营业执照
				province: '',
				city: '',
				district: '',
				idcardZm: '', //身份证正面
				idcardFm: '', //身份证反面
				logoUrl: '',
				// id:null
				id:'',
				merchantType:"P"
			},
			merCategoryList: [],
			index: 0,
			RESOURCES_URL: VUE_APP_RESOURCES_URL
		};
	},
	created() {
		//会员信息
		getUserInfo().then(res => {
		      // console.log(JSON.stringify(res))
		      if (res.status == 200) {
		        this.form.id = res.data.uid;
		      } else {
		        this.$msg.error("获取数据失败,请重试");
		      }
		    });},
	methods: {
		chooseImage: function(imageType) {
			//选择资质文件图片
			var that = this;
			uni.chooseImage({
				count: 1,
				success: function(res) {
					if (imageType == 'charter') {
						that.charterImage = res.tempFilePaths[0];
					} else if (imageType == 'idcardZm') {
						that.idcardZmImage = res.tempFilePaths[0];
					} else if (imageType == 'idcardFm') {
						that.idcardFmImage = res.tempFilePaths[0];
					} else if (imageType == 'logoUrl') {
						that.logoUrlImage = res.tempFilePaths[0];
					}

					//调用上传
					uni.uploadFile({
						url: VUE_APP_API_URL + '/api/upload',
						filePath: res.tempFilePaths[0],
						name: 'file',
						success(res) {
							// 显示上传信息
							console.log(res);
							//	alert(JSON.stringify(res.data));
							var data = JSON.parse(res.data);
							if (imageType == 'charter') {
								that.form.charter = data.link;
							} else if (imageType == 'idcardZm') {
								that.form.idcardZm = data.link;
							} else if (imageType == 'idcardFm') {
								that.form.idcardFm = data.link;
							} else if (imageType == 'logoUrl') {
								that.form.logoUrl = data.link;
							}
						}
					});
				}
			});
		},
		getCityList: function() {
			let that = this;
			getCity()
				.then(res => {
					that.district = res.data;
					that.ready = true;
				})
				.catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none',
						duration: 2000
					});
				});
		},
		cityResult(values) {
			//城市选中回调处理
			// console.log(this);
			// console.log(values);
			this.address = {
				province: values.province.name || '',
				city: values.city.name || '',
				district: values.district.name || '',
				city_id: values.city.id
			};
			//  this.addressText = `${this.address.province}-${this.address.city;}-${this.address.district}`;
			this.form.province = this.address.province;
			this.form.city = this.address.city;
			this.form.district = this.address.district;
		},
		ruzhuSubmit() {
			//提交入驻
			//校验表单 
			var errorMsg = "";
			if(!this.form.merCategoryId){
				errorMsg = "请选择经营类目"; 
			}
			
			if(!this.form.merchantName){
				errorMsg = "请输入商户名称"; 
			}
			if(!this.form.linkUser ||!this.form.linkTel){
				errorMsg = "请输入联系人和联系方式"; 
			}
			
			if(!this.form.address ||!this.form.district || !this.form.city){
				errorMsg = "请输入区域地址"; 
			}
			 
			 if(!this.form.idcardFm ||!this.form.idcardFm ){
			 	errorMsg = "请上传身份证"; 
			 }
			 if(!this.form.charter  ){
			 	errorMsg = "请上传营业执照"; 
			 }
			if(!this.form.logoUrl  ){
				errorMsg = "请上传商户logo"; 
			}
		 
			if(errorMsg!=""){
				uni.showToast({
					title: errorMsg,
					icon: 'none'
				});
				
				return;
			}
			

			submitRuZhu(this.form)
				.then(res => {
					if (res.success) {
						// uni.showModal({
						// 	title: '提示',
						// 	content: '提交成功',
						// 	showCancel: false,
						// 	success: function(res) {}
						// });
						
						uni.setStorageSync("statusText","0" );
						uni.setStorageSync("failMessage","" );	  
						
						
						this.$yrouter.push({
							path: '/pagesMer/shanghu/merchantRuzhuResult'
						});
					}
				})
				.catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none',
						duration: 2000
					});
				});
		},
		getAllMerCategoryList() {
			//获取经营类目
			getAllMerCategoryList()
				.then(res => {
					//	console.log(JSON.stringify(res));
					this.merCategoryList = res.data;
					this.form.merCategoryId = this.merCategoryList[0].id;
				})
				.catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none',
						duration: 2000
					});
				});
		},
		bindMerCategoryChanges(e) {
			//选择类目回调
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
			this.form.merCategoryId = this.merCategoryList[this.index].id;
		},
		getInfo(){
			 var merId = parseInt(this.$yroute.query.merId);
			 if(merId){
				 ruzhuDetail(merId).then(res=>{
					 this.form = res.data;
					 if(this.form.logoUrl){
						 this.logoUrlImage = this.form.logoUrl;
					 }
					 if(this.form.charter){
				         this.charterImage = this.form.charter;
					 }
					 if(this.form.idcardFm){
					     this.idcardFmImage = this.form.idcardFm;
					 }
					 if(this.form.idcardZm){
					     this.idcardZmImage = this.form.idcardZm;
					 }
				 })
			 }else{ //可能是从帮派生活个人中心点击进来
				 ruzhuDetail().then(res=>{
				 	 if(res.data && res.data.id){ 
				 				var statusText = res.data.status; 
				 				var failMessage = res.data.failMessage; 
				 				uni.setStorageSync("statusText",statusText );
				 				uni.setStorageSync("failMessage",failMessage );	  
								// alert("replace");
				 				this.$yrouter.replace({
				 					path:"/pagesMer/shanghu/merchantRuzhuResult",
				 					query: {
				 					  merId:res.data.id //商户ID
				 					}
				 				});
				 	  } 
				 }) 
			 }
		},
		viewRuZhuNews(){ //查看入驻协议 
			this.$yrouter.push({
				path: '/pages/shop/news/NewsDetail/index?id=1'
			});
		}
	},
	mounted: function() {
		this.getCityList();
		this.getAllMerCategoryList();
	    this.getInfo();
	}
};
</script>

<style>
.processtup image {
	width: 100%;
	height: 200rpx;
}

.ruzhu-pictrue {
	width: 100%;
	height: 300rpx;
}

.form_table {
	background-color: #fff;
	margin-top: 10rpx;
}
.form_item {
	line-height: 30px;
	font-size: 28rpx;
	padding: 10px;
	border-bottom: rgba(0, 0, 0, 0.1) solid 1px;
}
.form_item span label {
	color: #ff0000;
}

.form_item_input {
	display: inline-block;
	/* height:40px; */
	width: 70%;
	vertical-align: middle;
	margin-left: 10px;
	font-size: 28rpx;
}

.form_item button {
	background: #ff0000;
	color: #ffffff;
	margin-top: 50px;
}

.font-title {
	font-size: 32rpx;
	color: #000000;
}

.list-item-add {
	border-bottom: 1px solid #eeeeee;
	padding: 30rpx 0;
	font-size: 28rpx;
}
.list-item-add .name {
	width: 240rpx;
	color: #0f0f0f;
}
.list-item-add .name text {
	color: #ff2626;
	padding: 30rpx 0;
}
.add-con {
	margin-top: 30rpx;
	overflow: hidden;
}
.add-con .left {
	float: left;
	text-align: center;
	padding: 10px;
}
.add-con .left image {
	width: 200rpx;
	height: 200rpx;
}
.add-con .left .texcent {
	text-align: center;
	font-size: 24rpx;
	color: #333333;
}
.add-con .right {
	float: left;
	margin-left: 20rpx;
	font-size: 24rpx;
	color: #999999;
	width: 470rpx;
}

.flex-footer {
	/* position: fixed; */
	bottom: 0;
	margin: 0 auto;
	text-align: center;
	background: #fff;
	width: 100%;
	height: 89px;
}

.pact {
	margin-top: 30rpx;
	margin-bottom: 10rpx;
	text-align: center;
	font-size: 24rpx;
	color: #2b4a39;
}
.pact text {
	color: #aec5b5;
}

.flex-footer button {
	background: #fff;
	color: #000;
	margin-top: 10px;
}
</style>
